import * as React from 'react';
import { Set, Path } from 'react-raphael';
import { Point, Range } from '../../reducer/const';
import { PathString } from '../../util/eventUtil';

import TaskNode, { INodeProps } from './TaskNode';


export default class StartNode extends TaskNode {

    constructor(props: INodeProps) {
        super(props);
        const {history} = this.props;
        if (history) {
            this.strokeWidth = 3;
            this.strokeIconWidth = 3;
        } else {
            this.strokeWidth = 1;
            this.strokeIconWidth = 3;
        }
    }

    getRefs = () => {
        return this.refs;
    }

    render() {
        return (
            <Set>
                {this.renderSelect()}
                {this.renderRect()}
                {this.renderIcon()}
            </Set >
        );
    }

    renderIcon(): JSX.Element {
        this.iconWidth = 40;
        const {range} = this.state;
        const pathString: string = this.getIconPath(range);
        let iconAttr = this.getIconAttr();
        return <Path ref='icon' attr={iconAttr} d={pathString} {...this.getEventProps() } />;
    }

    getIconAttr() {
        const iconAttr = { 'stroke': `${this.colorStroke}`, 'fill': `${this.colorStroke}`, 'stroke-width': `${this.strokeIconWidth}` };
        return iconAttr;
    }

    getIconPath(range: Range) {
        const size = range.width * 0.25;
        const center: Point = new Point(range.x + range.width / 2, range.y + range.height / 2);
        const pointA: Point = new Point(center.x + Math.sin(60) * size, center.y + Math.cos(60) * size);
        const pointB: Point = new Point(center.x + Math.sin(60) * size, center.y - Math.cos(60) * size);
        const pointC: Point = new Point(center.x + size, center.y);
        return new PathString().M(pointA).L(pointB).L(pointC).Z().toString();
    }

    updateIcon = (point: Point, range: Range): void => {
        const icon = this.getRefs().icon && this.getRefs().icon.getElement();
        if (icon) {
            const pathString: string = this.getIconPath(range);
            icon.attr({ path: pathString });
        }
    }

}
